<template>
  <div class="overheader-info-con">
    <div class="title-bar">物流/报关</div>
    <a-descriptions :data="declaration" />
    <div class="title-bar">箱规</div>
    <a-table :data="boxSpecList" :pagination="false" class="table-two-line" size="mini" :scroll="{ y: 180 }">
      <template #columns>
        <a-table-column title="外箱尺寸" #cell="{ record }" :width="260">
          <a-space v-if="record.volume">
            <div>{{ $extract(record, 'volume.length') ? $extract(record, 'volume.length') : '-' }}×</div>
            <div>{{ $extract(record, 'volume.width') ? $extract(record, 'volume.width') : '-' }}×</div>
            <div>{{ $extract(record, 'volume.height') ? $extract(record, 'volume.height') : '-' }}</div>
            <div>{{ $extract(record, 'volume.unit') }}</div>
          </a-space>
          <div v-else>--</div>
        </a-table-column>
        <a-table-column title="单箱数量" #cell="{ record }">
          <a-space v-if="$extract(record, 'quantity')">
            <div>{{ $extract(record, 'quantity') }}</div>
            <div>pcs</div>
          </a-space>
          <div v-else>--</div>
        </a-table-column>
        <a-table-column title="单箱毛重" #cell="{ record }">
          <a-space v-if="$extract(record, 'groWeight.weight')">
            <div>{{ $extract(record, 'groWeight.weight') }}</div>
            <div>{{ $extract(record, 'groWeight.unit') }}</div>
          </a-space>
          <div v-else>--</div>
        </a-table-column>
        <a-table-column title="单箱净重" #cell="{ record }">
          <a-space v-if="$extract(record, 'netWeight.weight')">
            <div>{{ $extract(record, 'netWeight.weight') }}</div>
            <div>{{ $extract(record, 'netWeight.unit') }}</div>
          </a-space>
          <div v-else>--</div>
        </a-table-column>
      </template>
    </a-table>
    <div class="title-bar">包装信息</div>
    <!-- <a-space>
      <div>包装</div>
      <div>{{ $extract(packing, 'skuName') ? $extract(packing, 'skuName') : '--' }}</div>
    </a-space> -->
    <a-table :data="packList" size="mini" class="table-two-line mt10" :pagination="false" :scroll="{ x: '100%', y: 200 }">
      <template #columns>
        <a-table-column title="序号" #cell="{ record, rowIndex }">{{ rowIndex + 1 }}</a-table-column>
        <a-table-column title="图片">
          <template #cell="{ record }">
            <ImgPopover :src="getImgUrl(record)">
              <template #con>
                <a-image :preview="false" width="40" height="40" fit="contain" :src="getImgUrl(record)" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="包装名称" #cell="{ record }">
          <TextLimit position="top" :rows="2">{{ record.skuName }}</TextLimit>
        </a-table-column>
        <a-table-column title="SKU" #cell="{ record }">
          <TextLimit position="top" :rows="2">{{ record.sku }}</TextLimit>
        </a-table-column>
        <a-table-column title="长宽高(cm)" #cell="{ record }"> {{ $extract(record, 'volume.length') }}×{{ $extract(record, 'volume.width') }}×{{ $extract(record, 'volume.height') }} </a-table-column>
        <a-table-column title="重量(g)" #cell="{ record }">
          {{ $extract(record, 'weight.weight') }}
        </a-table-column>
        <a-table-column title="数量" #cell="{ record }">
          {{ record.num }}
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  export default defineComponent({
    setup() {
      const data: any = reactive({
        declaration: [
          { label: '中文报关名', value: '' },
          { label: '英文报关名', value: '' },
          { label: '报关单价', value: '' },
          { label: '报关重量', value: '' },
          { label: '海关编码', value: '' },
          { label: '危险品运输', value: '' },
        ],
        boxSpecList: [],
        packList: [],
      })
      const init = (info: any) => {
        let declaration = info?.declaration || {}
        data.declaration[0].value = declaration?.name || '--'
        data.declaration[1].value = declaration?.nameEn || '--'
        data.declaration[2].value = declaration.amount ? `${declaration.currency ? declaration.currency : ''} ${declaration.amount}` : '--'
        data.declaration[3].value = declaration.weight ? `${declaration.weight} ${declaration.unit ? declaration.unit : ''}` : '--'
        data.declaration[4].value = declaration.customsCode || '--'
        data.declaration[5].value = declaration.dangerLabel || '--'
        data.boxSpecList = info?.boxSpecList || []
        data.packList = info?.packingList || []
      }

      const getImgUrl = (record: any) => {
        return record.productPicList[0]?.url || ''
      }
      return {
        ...(toRefs(data) as any),
        init,
        getImgUrl,
      }
    },
  })
</script>

<style lang="less" scoped>
  .overheader-info-con {
    margin: 10px 0;
  }
</style>
